<template>
  <el-menu
    :default-active="activeIndex"
    mode="horizontal"
    :ellipsis="false"
    @select="handleSelect"
    style="width: 100vw; display: flex; border-bottom: none; margin: 0; padding: 0;"
  >
    <el-menu-item index="0" style="flex: 1; text-align: center;">
      <img
        style="width: 100px"
        src="@/assets/images/博客.svg"
        alt="Element logo"
      />
    </el-menu-item>
    <el-menu-item index="/" style="flex: 1; text-align: center;">首页</el-menu-item>
    <el-menu-item index="/articles" style="flex: 1; text-align: center;">博主管理</el-menu-item>
    <el-menu-item index="/user/profile" style="flex: 1; text-align: center;">我的资料</el-menu-item>
    <el-sub-menu index="2" style="flex: 1; text-align: center;">
      <template #title>登陆相关</template>
      <el-menu-item index="/login">登录注册</el-menu-item>
      <el-menu-item index="/logout">退出登录</el-menu-item>
    </el-sub-menu>
  </el-menu>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const activeIndex = ref('1')
const handleSelect = (key: string, keyPath: string[]) => {
  // 如果是 logo，不跳转
  if (key === '0') return
  // 跳转到对应路由
  router.push(key)
}
</script>